//引入自定义变量属性
@import '@/scss/var.scss';

.box {
  width: dw(800px);
  height: 100%;
  padding-top: dw(10px);
  padding-left: dw(30px);
  overflow-y: scroll;
  overflow-x: hidden;
  // position: relative;

  .from {
    position: absolute;
    right: 10%;
    top: dw(100px);
    height: 100%;
    z-index: 999;
  }

  /* 右边头部样式 */
  .title {
    width: 100%;
    height: dw(50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: dw(18px);
    margin-bottom: dw(15px);

    .batch {
      // color: red;
      font-size: dw(20px);
      margin-right: dw(50px);
    }

    .delete {
      margin-right: dw(50px);
      i{
        font-size: dw(20px);

      }

    }


  }

  /* 新建代办事件样式 */
  .add {
    background-color: rgb(147, 224, 255, 0.5);
    height: dw(50px);
    width: 95%;
    border-radius: dw(10px);
    display: flex;
    align-items: center;
    font-size: dw(17px);
    color: $ColorBlueFont;
    cursor: pointer;

    i {
      font-size: dw(25px);
      margin-right: dw(10px);
      margin-left: dw(10px);
    }
  }

  //回收站清空按钮
  .clear_recycle {
    margin-top: dw(70px);
    width: 90%;
    height: dw(50px);
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: dw(150px);
      height: dw(40px);
      border: 1px solid $ColorREFont;
      color: $ColorREFont;
      border-radius: dw(15px);
    }
  }

  /* 代办事件列表 */
  .ul_list {
    width: 95%;
    margin-top: dw(15px);

    .ul_title {

      i {
        font-size: dw(12px);
        color: gray;
      }
    }

    .li_check {
      border: 1px solid rgb(147, 224, 255);
    }

    li {
      &:hover {
        cursor: pointer;
      }
      padding-top: dw(5px);
      margin-top: dw(15px);
      // padding-left: dw(10px);
      border-radius: dw(10px);

      width: 100%;
      background-color: rgba(255, 255, 255, 0.6);






      /* 代办事件列表内容 */
      .li_content {
        padding: dw(15px);
        min-height: dw(50px);
        padding-top: dw(5px);
      }

      /* 代办事件列表事件 */
      .li_time {
        padding: dw(0px) dw(15px) dw(15px) dw(15px);
        font-size: dw(13px);
        display: flex;
        justify-content: space-between;
        color: gray;

        .expire {
          color: $ColorRedFont;
        }

        /* 已完成与未完成样式 */
        .undone {
          font-size: dw(13px);
          padding: dw(3px) dw(10px) dw(5px) dw(10px);
          background-color: $ColorBlueBack;
          color: $ColorBlueFont;
          border-radius: dw(15px);
        }

        .done {
          font-size: dw(13px);
          padding: dw(3px) dw(10px) dw(5px) dw(10px);
          // background-color: $ColorBlueBack;
          color: $ColorGreenFont;
          border: 1px solid $ColorGreenFont;
          border-radius: dw(15px);
        }

        .recycle {
          font-size: dw(13px);
          padding: dw(5px) dw(10px) dw(5px) dw(10px);
          // background-color: $ColorBlueBack;
          color: rgb(147, 224, 255);
          border: 1px solid rgb(147, 224, 255);
          border-radius: dw(15px);
        }
      }

    }





  }


}

.box::-webkit-scrollbar {
  width: 0;
}

.box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 4px rgb(203,203,203);
  background: none;

}

.box::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 4px rgb(203,203,203);
  border-radius: 0;
  background: none;
}
